<!--业务分析-排行版-->
<template>
  <div class="contain">
    <app-header></app-header>
    <div class="ana-tit-list cf bus-ana-tit">
      <label><input type="radio" value="" name="time" checked="checked" @click="getDay()"><span>今日</span></label>
      <!-- <label><input type="radio" value="" name="time" @click="getWeek()"><span>本周</span></label> -->
      <label><input type="radio" value="" name="time" @click="getMonth()"><span>本月</span></label>
      <!-- <div class="f-r bus-anadate">
        <i class="iconfont icon-back"></i>
        <em class="time">2017-02-02</em>
        <i class="iconfont icon-more"></i>
      </div> -->
    </div>
    <ul class="displayflex bus-rank-total">
      <li class="flex1">
        <p>回款(元)</p>
        <em>{{Amount}}</em>
      </li>
      <li class="flex1">
        <p>销量</p>
        <em>{{qty}}</em>
      </li>
    </ul>
    <div class="bus-ana-tit cf">
      TOP10
      <div class="ana-tit-list f-r">
                <label><input type="radio" value="" name="type" @click="getDataQty()"  checked="checked"><span>销量</span></label>
        <label><input type="radio" value="" name="type" @click="getData()"><span>金额</span></label>

      </div>
    </div>
    <div class="bus-ana-rank">
      <div v-if="groupName=='GoodsName'" class="displayflex bar-box"  v-for="item in CustomerAnalysis">
        <div class="flex1 bus-msg-box">
          <div class="displayflex bus-msg">
            <p class="flex1 name">{{item.SupplierGoodsName}}</p>
            <em v-show="showqty==false">￥{{item.Amount}}</em>
            <em v-show="showqty==true">{{item.SupplierPoQty}}</em>
          </div>
          <div class="bus-percent"><span class="cur" style="width:30%;"></span></div>
        </div>
        <i class="iconfont icon-more"></i>
      </div>
      <template v-if="groupName!='GoodsName'">
        <div class="displayflex bar-box" @click="todetail(item.MedGuid,item.MedName)"  v-for="item in CustomerAnalysis">
          <div class="flex1 bus-msg-box">
            <div class="displayflex bus-msg">
              <p class="flex1 name">{{item.MedName}}</p>
              <p v-show="groupName=='GoodsName'" class="flex1 name">{{item.SupplierGoodsName}}</p>
              <em v-show="showqty==false">￥{{item.DetailSum}}</em>
              <em v-show="showqty==true">{{item.DetailSum}}</em>
            </div>
            <div class="bus-percent"><span class="cur" style="width:30%;"></span></div>
          </div>
          <i class="iconfont icon-more"></i>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import appHeader from '@/components/core/header/app_header.vue';
export default {
  components: {
    appHeader
  },
  name:'cusrank',
  data() {
    return {
      CustomerAnalysis: [],
      Amount: 0,
      proportion: '0%',
      qty: 0,
      showqty: false,
      year: '',
      month: '',
      day: '',
      groupName: '',
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.getDay();
    })
  },
  methods: {
    getData: function() {
      var _this = this;
      _this.showqty = false;
      _this.Amount = 0;
      _this.CustomerAnalysis = [];
      var info = JSON.parse(localStorage.userinfo);
      var query = {
          year: _this.year,
          month: _this.month,
          day: _this.day,
          groupName: _this.groupName,
          TenantGUID:info.TenantGUID,
          CorpGuid:info.CorpGuid,
      };
      if (_this.groupName == 'MedName') {
        this.Ajax.post('CustomerTopApi', query).then(function(resp) {
          if (resp.IsSuccess) {
            _this.CustomerAnalysis = resp.Datas;
            _this.CustomerAnalysis.forEach(function(element) {
                _this.Amount += element.DetailSum;
            }, this);
          }
        });
      } else if (_this.groupName == 'BuyerName') {
        this.Ajax.post('CustomerSaleTopApi', query).then(function(resp) {
          if (resp.IsSuccess) {
            _this.CustomerAnalysis = resp.Datas;
            _this.CustomerAnalysis.forEach(function(element) {
                _this.Amount += element.DetailSum;
            }, this);
          }
        });
      } else if (_this.groupName == 'GoodsName') {
        this.Ajax.post('CustomerDetailGoodsTopApi', query).then(function(resp) {
            if (resp.IsSuccess) {
                _this.CustomerAnalysis = resp.Datas;
                _this.CustomerAnalysis.forEach(function(element) {
                    _this.Amount += element.Amount;
                }, this);
            }
        });
      }
    },
    getDataQty: function() {
        var _this = this;
        _this.CustomerAnalysis = [];
        _this.showqty = true;
        _this.qty = 0;
          var info = JSON.parse(localStorage.userinfo);
        var query = {
            year: _this.year,
            month: _this.month,
            day: _this.day,
            groupName: _this.groupName,
             TenantGUID:info.TenantGUID,
          CorpGuid:info.CorpGuid,
        };
        if (_this.groupName == 'MedName') {
            this.Ajax.post('CustomerQtyTopApi', query).then(function(resp) {
                if (resp.IsSuccess) {
                    _this.CustomerAnalysis = resp.Datas;
                    _this.CustomerAnalysis.forEach(function(element) {
                        _this.qty += element.DetailSum;
                    }, this);
                }
            });
        } else if (_this.groupName == 'BuyerName') {
            this.Ajax.post('CustomerSaleQtyTopApi', query).then(function(resp) {
                if (resp.IsSuccess) {
                    _this.CustomerAnalysis = resp.Datas;
                    _this.CustomerAnalysis.forEach(function(element) {
                        _this.qty += element.DetailSum;
                    }, this);
                }
            });
        } else if (_this.groupName == 'GoodsName') {
            this.Ajax.post('CustomerDetailGoodsTopApi', query).then(function(resp) {
                if (resp.IsSuccess) {
                    _this.CustomerAnalysis = resp.Datas;
                    _this.CustomerAnalysis.forEach(function(element) {
                        _this.qty += element.SupplierPoQty;
                    }, this);
                }
            });
        }
    },
    getDay: function() {
        var _this = this;
        var oDate = new Date();
        _this.groupName = _this.$route.query.type;
        _this.year = oDate.getFullYear();
        _this.month = oDate.getMonth() + 1;
        _this.day = oDate.getDate();
        if (_this.showqty) {
            _this.getData();
        } else {
           _this.getDataQty();
           
        }
    },
    getWeek: function() {
        var _this = this;
        var oDate = new Date();
        _this.year = oDate.getFullYear();
        _this.month = oDate.getMonth() + 1;
        _this.day = oDate.getDate();
        if (_this.showqty) {
            _this.getDataQty();
        } else {
            _this.getData();
        }
    },
    getMonth: function() {
        var _this = this;
        var oDate = new Date();
        _this.year = oDate.getFullYear();
        _this.month = oDate.getMonth() + 1;
        _this.day = '';
        if (_this.showqty) {
            _this.getDataQty();
        } else {
            _this.getData();
        }
    },
    todetail: function(id, name) {
      this.$router.push({
        path: '/order/crDetail',
        query: {
          medGuid: id,
          year: this.year,
          month: this.month,
          day: this.day,
          MedName: name,
          type: this.groupName,
        }
      })
    }
  },
}
</script>
